<template>
  <div class="mobile-home">
    <Carousel
      v-model="currentCarouselIndex"
      :list="data"
      image-field="image2"
      :interval="5000"
    />
    <div class="content-container">
      <MButton v-slide-up @click="handleDetail" />
    </div>
  </div>
</template>
<script setup lang="ts">
import Carousel from "@/components/Carousel/index.vue";
import { ref } from "vue";

const router = useRouter();

defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

const currentCarouselIndex = ref(0); // 当前轮播图索引

// 跳转详情
const handleDetail = () => {
  router.push("/m/about");
};
</script>
<style lang="scss" scoped>
.mobile-home {
  width: 100%;
  height: 100vh;
  background: url("../../../../assets/home/m_banner_bg.png") no-repeat;
  background-size: cover;
  position: relative;
  .content-container {
    position: absolute;
    bottom: 10%;
    left: 10%;
    z-index: 10;
  }
}
</style>
